<template>
  <!-- body -->
  <div class="find-car-detail page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}" >
    <div style="margin-bottom: 65px">
      <!-- 顶部导航栏 -->
      <!-- <van-nav-bar  title="购车事项通知书" fixed placeholder :border="false"> -->
        <!-- 导航栏左侧返回按钮 -->
        <!-- <template #left>
          <van-icon name="arrow-left" size="18" @click="goback" />
        </template> -->
        <!-- 导航栏右侧查看更多按钮 -->
        <!-- <template #right>
          <van-icon name="ellipsis" size="18" @click="getMoreChange" />
        </template>
      </van-nav-bar> -->
      
    <navbar title="购车事项通知书"></navbar>
    <div  class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <!--客户信息标题区域 -->
      <div class="judge-order">
        <span>客户信息</span>
      </div>
      <!-- 客户信息主体区域 -->
      <div>
        <van-cell-group>
          <van-field
            v-model="form.clientName"
            label="客户姓名"
            placeholder="请输入客户姓名"
            required
            maxlength="50"
            :formatter="formatterNumber"
          />
          <van-field
            v-model="form.identityCard"
            label="身份证号"
            placeholder="请输入身份证号"
            required
            maxlength="18"
            :formatter="formatterIdentityCard"
            format-trigger="onBlur"
          />
          <van-field
            v-model="form.mobile"
            label="联系方式"
            placeholder="请输入联系方式"
            type="tel"
            required
            maxlength="11"
            :formatter="formatterNeedNum"
            format-trigger="onBlur"
          />
          <van-field
            v-model="form.registrationArea"
            label="上牌地区"
            placeholder="请输入上牌地区"
            required
            maxlength="50"
          />
        </van-cell-group>
      </div>
      <!--车型确认标题区域 -->
      <div class="judge-order">
        <span>车型确认</span>
      </div>
      <!-- 车型确认主体区域 -->
      <div>
        <van-cell-group>
          <!-- <van-field v-model="form.brand" label="品牌名称" placeholder="请输入品牌名称" required /> -->
          <van-field
            v-model="form.carModels"
            is-link
            readonly
            name="carType"
            label="车型版本"
            placeholder="请选择车型版本"
            @click="jmupToBrand"
            required
            size="large"
          />
          <!-- <van-field v-model="form.carModels" label="车型版本" placeholder="请输入车型版本" required /> -->
          <van-field
            v-model="form.guidedPrice"
            label="指导价 (万元)"
            placeholder="请输入指导价"
            required
            maxlength="20"
          />
          <van-field
            v-model="form.carColor"
            label="颜色"
            placeholder="请输入颜色"
            required
            maxlength="20"
          />
          <van-field
            v-model="form.quantity"
            label="数量 (台)"
            placeholder="请输入数量"
            required
            maxlength="20"
            :formatter="formatterNeedNum"
            type="number"
          />
          <van-field
            v-model="form.amount"
            label="合计金额 (元)"
            placeholder="请输入合计金额"
            required
            maxlength="20"
            :formatter="formatterNeedNum"
            type="number"
          />
          <van-field
            v-model="form.amountBig"
            label="大写"
            placeholder="请输入大写"
            required
            maxlength="50"
          />
        </van-cell-group>
      </div>
      <!--付款方式标题区域 -->
      <div class="judge-order">
        <span>付款方式</span>
      </div>
      <!-- 付款方式主体区域 -->
      <div>
        <van-cell-group>
          <van-field
            v-model="form.paymentMethod"
            label="付款方式"
            placeholder="请输入付款方式"
            required
            is-link
            :readonly="true"
            @click="isShowPayWay = true"
          />
          <!-- :arrow-direction="down" -->
          <!-- 提车方式选择器 -->
          <div class="show_pay_way">
          </div>
          <van-popup v-model="isShowPayWay" round position="bottom">
            <van-picker
              title="付款方式"
              :columns="payWayColumns"
              show-toolbar
              @confirm="payWayChange"
              @cancel="payWayCancel"
            />
          </van-popup>
          <van-field
            v-show="form.paymentMethod == '按揭'"
            v-model="form.payee"
            label="收款方"
            placeholder="请输入收款方名称"
            required
            maxlength="20"
          />
          <van-field
            v-model="form.userName"
            label="户名"
            placeholder="请输入户名"
            required
            maxlength="50"
          />
          <van-field
            v-model="form.account"
            label="账户"
            placeholder="请输入账户"
            required
            maxlength="50"
            :formatter="formatterNeedNum"
            type="number"
          />
          <van-field
            v-model="form.openingBank"
            label="开户行"
            placeholder="请输入开户行"
            required
            maxlength="50"
          />
          <van-field
            v-show="form.paymentMethod == '按揭'"
            v-model="form.downPayment"
            label="首付款"
            placeholder="请输入首付款"
            required
            maxlength="20"
            :formatter="formatterNeedNum"
            type="number"
          />
          <van-field
            v-model="form.carWay"
            label="提车方式"
            placeholder="请输入提车方式"
            required
            :readonly="true"
            is-link
            @click="isShowBuyCarWay = true"
          />
          <!-- :arrow-direction="down" -->

          <!-- 提车方式选择器 -->
          <div class="show_buy_car_way">
          </div>
          <van-popup v-model="isShowBuyCarWay" round position="bottom">
            <van-picker
              title="提车方式"
              :columns="buyCarWayColumns"
              show-toolbar
              @confirm="buyCarWayChange"
              @cancel="buyCarWayCancel"
            />
          </van-popup>
        </van-cell-group>
      </div>
      <!-- 底部保存并提交审核按钮 -->
      <div class="btn_vant">
        <div>
          <van-button type="info" size="large" @click="editBuyCarBook"
            >保存并提交审核</van-button
          >
        </div>
      </div>

      <!-- 更多操作弹出层 -->
      <van-popup
        v-model="showMoreHandle"
        round
        position="bottom"
        :style="{ width: '90%', height: '206px', margin: '0 0 0 5%' }"
      >
        <div class="popup_big_box">
          <div style="margin-top: 22px">
            <span style="color: red">完结</span>
          </div>
          <van-divider />
          <div>
            <span style="color: red">退款</span>
          </div>
          <van-divider />
          <div>
            <span style="color: red">取消订单</span>
          </div>
          <van-divider />
          <div @click="showMoreHandle = false">
            <span style="color: blue">取消</span>
          </div>
        </div>
      </van-popup>
    </div></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  getOfMortgageIntentionCId,
  getOfMortgageIntentionCUadate,
} from "../api";
import { validIdentityCard,validPhone } from "../../../common/validate";
export default {
  data() {
    return {
      // 信息费开关状态
      isNeedMessage: true,
      // 更多操作弹出层状态
      showMoreHandle: false,
      // 输入框提交内容
      form: {
        // orderId
        id: "",
        //  vnid
        vnId: "",
        // vtdId
        vtdId: "",
        // 客户姓名
        clientName: "",
        // 身份证
        identityCard: "",
        // 联系方式
        mobile: "",
        // 上牌地区
        registrationArea: "",
        // 品牌名称
        brand: "",
        // 车型
        carModels: "",
        // 指导价
        guidedPrice: "",
        // 车颜色
        carColor: "",
        // 数量
        quantity: "",
        // 金额
        amount: "",
        // 大写
        amountBig: "",
        // 付款方式
        paymentMethod: "",
        // 户名
        userName: "",
        // 账户
        account: "",
        // 开户行
        openingBank: "",
        // 首付款
        downPayment: "",
        // 提车方式
        carWay: "",
        // 收款方
        payee: ''
      },
      // 是否显示支付方式
      isShowPayWay: false,
      // 支付方式
      payWayColumns: ["全款", "按揭"],
      // 是否显示提车方式
      isShowBuyCarWay: false,
      // 提车方式
      buyCarWayColumns: ["到店自提", "平台送车上门"],
      // 获取屏幕状态栏高度
      phoneStatusBarHeight:''
    };
  },
  methods: {
    // 页面回显数据
    async initOfMortgageIntentionCId() {
      let id = this.form.id;
      const { data } = await getOfMortgageIntentionCId(id);
      this.form = data;
      console.log('%c [ data ]-333', 'font-size:13px; background:pink; color:#bf2c9f;', data)
      // this.form.amount = this.form.amount == 0 ? '' : this.form.amount;
      // this.form.quantity = this.form.quantity == 0 ? '' : this.form.quantity;
      this.form.guidedPrice = this.form.guidedPrice == 0 ? '' : this.form.guidedPrice / 10000;
      if (this.form.carWay == '01') {
        this.form.carWay = '到店自提'
      }else if (this.form.carWay == '02') {
        this.form.carWay = '平台送车上门'
      }else{
        this.form.carWay
      }


      if (this.form.paymentMethod == '01') {
        this.form.paymentMethod = '全款'
      }else if (this.form.paymentMethod == '02') {
        this.form.paymentMethod = '按揭'
      }else{
        this.form.paymentMethod
      }
      if(data.amount == undefined || data.guidedPrice == 'NaN' || data.quantity == undefined){
         this.form = {
        // orderId
        id: "",
        //  vnid
        vnId: "",
        // vtdId
        vtdId: "",
        // 客户姓名
        clientName: "",
        // 身份证
        identityCard: "",
        // 联系方式
        mobile: "",
        // 上牌地区
        registrationArea: "",
        // 品牌名称
        brand: "",
        // 车型
        carModels: "",
        // 指导价
        guidedPrice: "",
        // 车颜色
        carColor: "",
        // 数量
        quantity: "",
        // 金额
        amount: "",
        // 大写
        amountBig: "",
        // 付款方式
        paymentMethod: "",
        // 户名
        userName: "",
        // 账户
        account: "",
        // 开户行
        openingBank: "",
        // 首付款
        downPayment: "",
        // 提车方式
        carWay: "",
        // 收款方
        payee: ''
        }
      }


      // this.form.carWay = this.form.carWay == '01' ? '到店自提' : this.form.carWay == '00' ? '平台送车上门' : ''
      // this.form.paymentMethod = this.form.paymentMethod == '01' ? '全款' : his.form.paymentMethod == '00' ? '按揭' : ''

    },
    // 过滤输入框输入的数字
    formatterNumber(value){
      // 过滤输入的数字
      return value.replace(/\d/g, '');
    },
    // 过滤输入框输入只允许数字
    formatterNeedNum(value){
      if(value == this.form.mobile && this.form.mobile !== ''){
        if (!validPhone(value)) {
          Toast("手机号码格式错误，请重新输入！");
          return value.replace(/[\W]/g,'')
        }
      }
      // 过滤输入的数字
      return value.replace(/[^\d]/g,'');
    },
    // 过滤输入框输入的文字
    formatterText(value){
      // 过滤输入的数字
      return value.replace(/[\W]/g,'')
    },
    // 校验输入框输入的身份证号码
    formatterIdentityCard(value){
      // 过滤输入的数字
      /* return /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value) */
      if (this.form.identityCard == '' || this.form.identityCard == null || this.form.identityCard == undefined) return
      if (!validIdentityCard(value)) {
        Toast("身份证号码格式错误，请重新输入！");
        return value.replace(/[\W]/g,'')
      }else{
        return this.form.identityCard = value.replace(/[\W]/g,'')
      }
    },
    // 编辑购车事项通知书
    async editBuyCarBook() {
      /*  校验输入框参数 start */

      /* 校验客户姓名 */
      if (this.form.clientName == "" || this.form.clientName == null) return Toast("请输入客户姓名！")
      /* 校验身份证 */
      if (this.form.identityCard == "" || this.form.identityCard == null) return Toast("请输入身份证号码！");
      if (!validIdentityCard(this.form.identityCard)) return Toast("身份证号码格式错误，请重新输入！");
      /* 校验手机号码 */
      if (this.form.mobile == "" || this.form.mobile == null) return Toast("请输入手机号码！");
      if (!validPhone(this.form.mobile)) return Toast("手机号码错误，请重新输入！");
      /* 校验品牌车型 */
      if (this.form.brand == '' || this.form.carModels == "" || this.form.brand == null || this.form.carModels == null) return Toast("请选择品牌车型！");
      /* 校验上牌地区 */
      if (this.form.registrationArea == "" || this.form.registrationArea == null) return Toast("请输入上牌地区！");
      /* 校验指导价 */
      if (this.form.guidedPrice == "" || this.form.guidedPrice == null) return Toast("请输入指导价！");
      /* 校验车颜色 */
      if (this.form.carColor == "" || this.form.carColor == null) return Toast("请输入车颜色！");
      /* 校验数量 */
      if (this.form.quantity == "" || this.form.quantity == null) return Toast("请输入数量！");
      /* 校验合计金额 */
      if (this.form.amount == "" || this.form.amount == null) return Toast("请输入合计金额！");
      /* 校验大写 */
      if (this.form.amountBig == "" || this.form.amountBig == null) return Toast("请输入大写！");
      /* 校验付款方式 */
      if (this.form.paymentMethod == "" || this.form.paymentMethod == null) return Toast("请选择付款方式！");
      /* 校验收款方 */
      if(this.form.paymentMethod == '按揭'){
        if(this.form.payee == '' || this.form.payee == null) return Toast("请输入收款方名称！");
      }
      /* 校验户名 */
      if (this.form.userName == "" || this.form.userName == null) return Toast("请输入户名！");
      /* 校验账户 */
      if (this.form.account == "" || this.form.account == null) return Toast("请输入账户！");
      /* 校验开户行 */
      if (this.form.openingBank == "" || this.form.openingBank == null) return Toast("请输入开户行！");
      /* 校验首付款 */
      if(this.form.paymentMethod == '按揭'){
        if(this.form.downPayment == '' || this.form.downPayment == null) return Toast("请输入首付款！");
      }
      /* 校验提车方式 */
      if (this.form.carWay == "" || this.form.carWay == null) return Toast("请选择提车方式！");

      /*  校验输入框参数 end */
      
      if (this.form.carWay == '到店自提') {
        this.form.carWay = '01'
      }else if (this.form.carWay == '平台送车上门') {
        this.form.carWay = '02'
      }else{
        this.form.carWay
      }


      if (this.form.paymentMethod == '全款') {
        this.form.paymentMethod = '01'
      }else if (this.form.paymentMethod == '按揭') {
        this.form.paymentMethod = '02'
      }else{
        this.form.paymentMethod
      }
      // return Toast("SUCCESS");
      let params = {
        ...this.form,
        guidedPrice: parseInt(this.form.guidedPrice * 10000)
      }
      // return console.log('%c [  ]-445', 'font-size:13px; background:pink; color:#bf2c9f;', params)
      const data = await getOfMortgageIntentionCUadate(params);
      if(data.code !== 0) return Toast(data.msg)
      Toast("购车事项通知书提交成功");
      localStorage.removeItem("editBuyCarNotification");
      this.$router.push({
        name: "findCarManagement",
        query:{
          activeFindCar:'eventNotificationFindCar'
        }
      });
    },
    // 返回按钮
    goback() {
      localStorage.removeItem("editBuyCarNotification");
      // this.$router.go(-1)
      let id = localStorage.getItem("idOld");
      this.$router.push({
        name: "auditDetailFindCar",
        query: {
          status: "03",
          id,
        },
      });
    },
    // 更多操作 => 弹出层
    getMoreChange() {
      this.showMoreHandle = true;
    },
    // 跳转到品牌选择页面
    jmupToBrand() {
      this.setFormData();
      this.$router.push({
        name: "SelectBrand",
        query: {
          myName: "editBuyCarNotification",
          idOld: this.$route.query.idOld,
        },
      });
    },
    // 付款方式确认事件事件
    payWayChange(value) {
      this.form.paymentMethod = value;
      this.isShowPayWay = false;
    },
    // 付款方式确认事件事件
    payWayCancel() {
      this.isShowPayWay = false;
    },
    // 提车方式确认事件事件
    buyCarWayChange(value) {
      this.form.carWay = value;
      this.isShowBuyCarWay = false;
    },
    // 提车方式确认事件事件
    buyCarWayCancel() {
      this.isShowBuyCarWay = false;
    },
    // 路由跳转保存数据
    setFormData() {
      localStorage.setItem("editBuyCarNotification", JSON.stringify(this.form));
    },
  },
  created() {
    // 获取屏幕状态栏高度
    this.phoneStatusBarHeight = window.phoneStatusBarHeight
    // 用户id
    this.form.id = this.$route.query.id;
    localStorage.setItem("idOld", this.$route.query.idOld);
    // 获取回显数据
    let editBuyCarNotification = JSON.parse(
      localStorage.getItem("editBuyCarNotification")
    );
      console.log('%c [ editBuyCarNotification ]-481', 'font-size:13px; background:pink; color:#bf2c9f;', editBuyCarNotification)
    if (editBuyCarNotification == undefined || editBuyCarNotification == null ||  editBuyCarNotification == '') {
      this.initOfMortgageIntentionCId();
    } else {
      this.form = editBuyCarNotification;
      // this.form.amount = '';
      // this.form.quantity = '';
      this.form.guidedPrice = this.form.guidedPrice/10000;
      // this.form.guidedPrice = '';

    }
    if (this.$route.query.myName == 'editBuyCarNotification') {
      this.form.brand = this.$route.query.brand;
      this.form.carModels = this.$route.query.carType;
      this.form.vnId = this.$route.query.vnid;
      this.form.vtdId = this.$route.query.vtdId;
      this.form.guidedPrice = this.$route.query.carModelGuidePrice / 10000;
    }
    
  },
  //设置背景颜色
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
  // 销毁监听事件
  /* destroyed() {
    this.setFormData()
  }, */
  /* watch:{
    $route: {
      handler(route){
        const that=this;
        console.log(route);
        debugger
        if(route.name =='SelectBrand'){
          that.setFormData();
        }
      },
      deep:true
    }
  } */
};
</script>

<style scoped lang="less">
.selectPay {
  p {
    text-align: center;
  }
  .pay-img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    img:nth-child(1) {
      width: 110px;
      height: 110px;
      padding-right: 50px;
    }
    img:nth-child(2) {
      width: 90px;
      height: 90px;
    }
  }
}
.advice-note {
  margin: 8px 0;
}
.pay-for {
  display: flex;
  padding: 0 16px;
  button {
    flex: 1;
    height: 44px;
    border: none;
    background-color: #ffffff;
    font-size: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-radius: 5px;
    margin-bottom: 50px;
  }
  button:nth-child(2) {
    background-color: #f6c401;
    margin-left: 9px;
  }
  button:nth-child(1) {
    border: 1px solid #e6e6e6;
  }
}
.agreement {
  padding: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  span {
    color: #666666;
    a {
      color: #f6c401;
    }
  }
}
.find-car-inform {
  margin-bottom: 8px;
}
.application-info {
  border: 1px solid #eeeeee;
}
.someTime {
  padding: 16px;
  div {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    .left {
      color: #666666;
      margin: 1% 0;
    }
    .right {
      color: #333333;
    }
  }
}
.to-be-paid {
  .user-brevity {
    height: 100px;
    background-color: #ffffff;
    padding: 16px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular, PingFang SC;
    div {
      display: flex;
      justify-content: space-between;
      div {
        padding: 2% 0;
      }
      .left {
        font-size: 15px;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.active-wait {
  background-color: rgba(254, 140, 25, 0.1);
  color: #fe8c19;
}
.finsh-pay {
  color: #0d7ef0;
  background-color: rgba(13, 126, 240, 0.1);
}
.finsh {
  color: #999999;
  background-color: rgba(153, 153, 153, 0.1);
}
.find-car-detail {
  width: 100%;
  height: 100%;
}
.judge-order {
  box-sizing: border-box;
  width: 375px;
  height: 40px;
  padding: 0 16px;
  span {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    line-height: 40px;
  }
}
.btn_vant {
  // position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  div {
    width: 90vw;
  }
}
.message_info {
  width: 100vw;
  height: 5vh;
  background-color: #fff;
  color: #323233;
  font-size: 3.73333vw;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  span {
    margin-left: 1vh;
  }
  input {
    border: unset;
    margin-left: 5vw;
  }
  input:disabled {
    background-color: #fff;
  }
  .switch_style {
    margin-left: 5vw;
  }
}
.popup_big_box {
  div {
    display: flex;
    justify-content: center;
  }
}
/* .show_pay_way{

}
.show_buy_car_way{

} */
</style>
<style lang="less">
.find-car-detail {
  .van-button--large {
    border-radius: 2vw;
    height: 12vw;
  }
  .van-nav-bar--fixed{
    padding-top: 50px;
  }
}
</style>
